import styled from "@emotion/styled"
import Svg from "@/components/base/Svg"
import dayjs from "dayjs"
import { formatCurrency } from "@/utils/format"

const rankingList = [
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
    {
        player: {
            text: "Fil***876",
            icon: "",
        },
        bet: 23456789,
        bonus: 25000.0,
    },
]

const ContainerDiv = styled.div`
    width: 100%;
    height: 90vh;
    position: relative;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background-color: #f7f8fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
`

const HeaderContainer = styled.div`
    width: 100%;
    height: 64rem;
    padding: 0 16rem;
    border-bottom: 1rem solid #e5e6eb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d2129;
    font-size: 16rem;
    font-weight: 700;
`
const DetailClose = styled.span`
    width: 32rem;
    height: 32rem;
    position: absolute;
    top: 50%;
    right: 16rem;
    background-color: #fff;
    transform: translateY(-50%);
    border: 1rem solid #6b7785;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
`

const ContentContainer = styled.div`
    padding: 16rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
`
const ContentUl = styled.ul`
    color: #272e3b;
    font-size: 14rem;
    font-weight: 500;
    padding-inline-start: 0;
    border-radius: 8rem;
    overflow: hidden;
    li {
        list-style: none;
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        height: 40rem;
        line-height: 40rem;
        padding: 10rem 12rem;
        border-bottom: 1rem solid #f2f3f5;
        box-sizing: border-box;
        span {
            color: #1d2129;
            font-weight: 500;
            font-size: 12rem;
            flex: 1;
        }
        img {
            width: 24rem;
            height: 24rem;
        }
        .no {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span:nth-child(1) {
            width: 10%;
            flex: unset;
        }
        span:nth-child(2) {
            text-align: left;
            display: flex;
            align-items: center;
        }
        span:nth-child(3) {
            text-align: right;
        }
        span:nth-child(4) {
            text-align: right;
        }
    }
    li:nth-last-child(1) {
        border-bottom: none;
    }
    li:nth-child(2n) {
        background-color: #f2f3f5;
    }
    .head {
        background-color: #fff;
        height: 36rem;
        box-sizing: border-box;
        > span {
            font-size: 12rem;
            font-weight: 700;
            color: #6b7785;
        }
    }
`

type IProps = {
    close: () => void
}

export type BetItemProps = {
    bet: number
    bonus: number
    id?: string
    index?: number
    player: {
        text: string
        icon: string
    }
}
export const HistoryContent = (props: { data: BetItemProps[] }) => {
    const { data } = props
    const formatNo = (index: number) => {
        switch (index) {
            case 0:
                return <Svg src="pages/Walfare/svg/ranking1.svg" />
            case 1:
                return <Svg src="pages/Walfare/svg/ranking2.svg" />
            case 2:
                return <Svg src="pages/Walfare/svg/ranking3.svg" />
            default:
                return index + 1 + "th"
        }
    }
    return (
        <div className="history-content">
            <ContentUl>
                <li className="head">
                    <span>No.</span>
                    <span>Player</span>
                    <span>Bet</span>
                    <span>Bonus</span>
                </li>
                {data?.map((rankInfo, index) => (
                    <li key={index}>
                        <span className="no">{formatNo(rankInfo?.index || index)}</span>
                        <span>
                            <img src={rankInfo.player.icon} />
                            {rankInfo.player.text}
                        </span>
                        <span>{formatCurrency(rankInfo?.bet ?? 0)}</span>
                        <span style={{ color: "#FF1F57" }}>
                            {formatCurrency(rankInfo?.bonus ?? 0)}
                        </span>
                    </li>
                ))}
            </ContentUl>
        </div>
    )
}

const RealTime = ({ close }: IProps) => {
    return (
        <ContainerDiv>
            <HeaderContainer>
                <span>{dayjs().format("YYYY/MM/DD")}</span>
                <DetailClose onClick={close}>
                    <Svg src="pages/Walfare/svg/cancel.svg" />
                </DetailClose>
            </HeaderContainer>
            <HistoryContent data={rankingList} />
        </ContainerDiv>
    )
}

export default RealTime
